<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <title>注册 | 汇客网</title>
        <script src="../js/index.js"></script>
	   <link rel="stylesheet" href="../css/index.css">
	   <link rel="shortcut icon" href="../../../lib/汇 .ico">
	   <link rel="stylesheet" href="../../home/css/bootstrap.css">
	</head>
    <body>	
		<div class="modal fade" id="click_modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
			<div class="modal-dialog" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<!-- data-dismiss关闭模态框 -->
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
								aria-hidden="true">&times;</span></button>
						<h4 class="modal-title" id="myModalLabel">友情提示</h4>
					</div>
					<div class="modal-body">
					注册成功!
				
					</div>
					<div class="modal-footer">
						<button type="button" id="back" class="btn btn-default" data-dismiss="modal">关闭</button>
						<button type="button" id="save" class="btn btn-primary" >登录</button>
					</div>
				   
				</div>
			</div>
		</div>
		<div class="title" style="margin: auto;width: 200px;"><img id='home' style="cursor: pointer; width: 100px; height: 50px;" src="../images/汇客橙S.png" alt=""><div class="img-content">huike.com</div></div>
        <div class="main">
		<a style="font-size: 20px;  margin-left: 62px;" href="../../login/login.html">返回登录</a>
		<div class="top"><h1>用户注册</h1></div>
		<div class="middle">
			<div class="r-table">
		<form action="" method="get" >
		<table width="390px"  >
		<tr>
			<td width="80"> <label class=" lbfont"> 邮&emsp;&thinsp; &thinsp; 箱</label></td>
			<td colspan="2" ><input class="in1" id="Email" type="text"/>
				<span id="sp1" style="color: red; ">×</span>
			</td>
		</tr>
		<tr class="msg" ><td colspan="3"><lable id="email"></lable> </td> </tr>
		<tr>
			<td width="80"><label class="lbfont">手机号码</label></td>
			<td width="40"><input class="in3" type="text" style="text-align: center;"value="+86" readonly="readonly"/></td>
			<td><input id="phoneNumber" type="text" class="in2" />
				<span id="sp2" style="color: red;">×</span>
			</td>
		</tr>
		<tr class="msg" > <td colspan="3"><lable id="pn"></lable></td></tr>
		<tr>
			<td width="80"><label class="lbfont">登录用户</label></td>
			<td colspan="2"><input id="txtAccname" type="text" class="in1" />
				<span  id="sp3" style="color: red;" >×</span>
			</td>
			
		</tr>
		<tr class="msg" > <td colspan="3"><lable id="ta"></lable></td></tr>
		<tr>
			<td width="80"><label class="lbfont">显示昵称</lable></td>
			<td colspan="2"><input id="txtName" type="text" class="in1" />
				<span id="sp4" style="color: red;">×</span>
			</td>
		</tr>
		<tr class="msg" > <td colspan="3"><lable id="tn"></lable></td></tr>
		<tr>
			<td width="80"><label class=" lbfont">密&emsp;&thinsp; &thinsp; 码</label></td>
			<td colspan="2"><input id="txtPassword" type="password" class="in1" />
				<span id="sp5" style="color: red;">×</span>
			</td>
		</tr>
		<tr class="msg" > <td colspan="3"><lable id="tp"></lable></td></tr>
		<tr>
			<td width="80"><label class="lbfont">确认密码</label></td>
			<td colspan="2"><input id="txtPassword2" type="password" class="in1" />
				<span id="sp6" style="color: red;">×</span>
			</td>
		</tr>
		<tr class="msg" > <td colspan="3"><lable id="tp2"></lable></td></tr>
		<tr>
			<td colspan="3" align="center"><input class="submit" type="button"  onclick="return isSumbit()" value="注册" /></td>
		</tr>
		<tr class="msg" ><td colspan="3"></td></tr>
		<tr>
			<td colspan="3" align="right" style="font-size: 14px;">*点击"注册"按钮，即表示您同意并愿意遵守<a href="#">用户协议</a>。</td>
		</tr>
		</table>
		</form>
		</div>
		<div class="img"><img src="../images/registersideimg.png"/>
		<div class="omg"></div></div>
			
		</div>
		</div>
		<div class="foot">
			<ul>
				<li>关于我们</li>
				<li class="quarantine"></li>
				<li>商家入驻</li>
				<li class="quarantine"></li>
				<li>帮助中心</li>
				<li class="quarantine"></li>
				<li>汇客手机端</li>
			</ul>
		</div>
	</div>
	<script src="../../home/js/jquery-1.12.4.js"></script>
	<script src="../../home/js/bootstrap.min.js"></script>
	
	</body>
		<script type="text/javascript">
		   function openModal() {
			  
		   $('#click_modal').modal() 
		}
		$('#save').on('click',function(){
			location.href='../../login/login.html'
		})
		$('#back').on('click',function(){
			location.href='index.html'
		})
		var flag =true
	function isSumbit(){
		validate();
		console.log(flag)
			if(flag){	
			 openModal()
			   
			}
		
			return flag
		}
		document.getElementById("home").onclick=function(){
                     location.href="../../homepage/html/index.html"
		}
		function IsEmpty(ip,la,sp,str){
		
                ip.style.borderStyle="solid";//边框样式			
				ip.style.borderColor="#ff0000";//边框颜色
				ip.style.borderWidth="1px";//边框宽度
			   la.textContent=str;
			   la.style.height=20;
			   la.style.outlineColor="#F6CDD1";
			  sp.style.display='block';
			  return false;
			
		}
		function IsFalse(ip,la,sp,str){
			    
                ip.style.borderColor="#ff0000";//边框颜色
              la.style.outlineColor="#F6CDD1";
			    la.textContent=str;
			    la.style.height=20;
			    sp.style.display='block';
			    return false;
		}
		function IsTrue(ip,la,sp){
			 
                  ip.style.borderColor=null;
			 la.textContent="";
			    la.style.height=0;
			    sp.style.display='none';
			    	   la.style.outlineColor=null;
			    
		}
	function validate(){
		 var isSub=true;
		var Email = document.getElementById("Email");
		var email = document.getElementById("email");
		var sp1 = document.getElementById("sp1");
		var phoneNumber = document.getElementById("phoneNumber");
		var pn = document.getElementById("pn");
		var sp2 = document.getElementById("sp2");
		var txtAccname = document.getElementById("txtAccname");
		var ta = document.getElementById("ta");
		var sp3 = document.getElementById("sp3");
		var txtName = document.getElementById("txtName");
		var tn = document.getElementById("tn");
		var sp4 = document.getElementById("sp4");
		var txtPassword = document.getElementById("txtPassword");
		var  tp =document.getElementById("tp");
		var sp5 = document.getElementById("sp5");
		var txtPassword2 = document.getElementById("txtPassword2");
		var  tp2 =document.getElementById("tp2");
		var sp6 = document.getElementById("sp6");
		var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
          if(Email.value==""){
                  isSub= IsEmpty(Email,email,sp1,"请输入邮箱地址");
          }
             else{
             	if(reg.test(Email.value)){
                IsTrue(Email,email,sp1);
		          }else{
					isSub=  IsFalse(Email,email,sp1,"邮箱地址错误或不支持")

		}
                 
                  }
          
          if(phoneNumber.value==""){
                        isSub= IsEmpty(phoneNumber,pn,sp2,"请输入手机号码");}
            else{
		      	   if(phoneNumber.value.length<11||isNaN(phoneNumber.value)||phoneNumber.value.indexOf(".")!=-1){
          	              isSub= IsFalse(phoneNumber,pn,sp2,"国家代码或手机号有误");
                   }
                  else{
                      	IsTrue(phoneNumber,pn,sp2);
                      }
              }
            
            
           if(txtAccname.value==""){
           	    isSub= IsEmpty(txtAccname,ta,sp3,"请输入登录用户名");
           }
             else{
                  if(txtAccname.value.length<4||txtAccname.value.length>30) {
		              isSub=IsFalse(txtAccname,ta,sp3,"长度要求4-30个字符(2-15个中文)");
		              }
		      	else{
		               	IsTrue(txtAccname,ta,sp3);
		              }
           }
           
          
             if(txtName.value==""){
                  isSub=IsEmpty(txtName,tn,sp4,"请输入显示昵称");
             }
             else{
         	     if(txtName.value.length<2||txtName.value.length>20)   {
                    	isSub=IsFalse(txtName,tn,sp3,"长度要求2-20个字符(1-10个中文)");
                   } 
               else{
                 IsTrue(txtName,tn,sp4);
           }
         }
           
         if(txtPassword.value==""){
         isSub= IsEmpty(txtPassword,tp,sp5,"请输入密码");
             }
         else{
         	 if(txtPassword.value.length<8||txtPassword.value.length>50){
           	      isSub=  IsFalse(txtPassword,tp,sp5,"密码长度要求8-50位")
               }
         	else{
           	IsTrue(txtPassword,tp,sp5);
              }
         }
         
         
          if(txtPassword2.value!=""){
           if(txtPassword2.value!=txtPassword.value){
           	isSub=	IsFalse(txtPassword2,tp2,sp6,"确认密码与密码输入不一致")
           }else{
           	IsTrue(txtPassword2,tp2,sp6);
             }
		   }
		   flag=isSub;
		   console.log(isSub)
          return isSub;
		}
		</script>
</html>